<template>
	<view class="bg-color">
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="message-container">
				<view class="message-header">
					<view></view>
					<text class="message-title">{{msgObject.msgTitle}}</text>
					<image @tap="close" class="close-icon" src="../../static/img/close.png"></image>
				</view>
				<view class="message-time">{{msgObject.msgTime}}</view>
				<view class="message-content">
					{{msgObject.msgContent}}
				</view>		
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { readMsgById } from '@/utils/api/msg.ts'
	import { onLoad } from '@dcloudio/uni-app';
	// 关闭返回
	const close = () => {
		uni.navigateBack()
	}
	const msgObject = ref<any>({})
	const getList = async () => {
		const res = await readMsgById({ data: { msgId: msgId.value } })
		msgObject.value = res.data
	}
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const msgId = ref('')
	onLoad(async (option) => {
		msgId.value = option.msgId
		await getList()
		popup.value.open('bottom')
	})
</script>

<style>
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.message-container {
		width: 100%;
		min-height: 20vh;
		padding: 0 30rpx 0 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
	}

	.message-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.message-title {
		color: #262626;
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-icon {
		width: 21rpx;
		height: 21rpx;
	}

	/* 消息时间样式 */
	.message-time {
		color: #999999;
		/* 灰色字体 */
		font-size: 28rpx;
		/* 字体大小 */
		margin-top: 10rpx;
		/* 上边距 */
		text-align: right;
		/* 右对齐 */
		opacity: 0.7;
		/* 透明度，使字体稍显柔和 */
	}

	/* 消息内容样式 */
	.message-content {
		color: #333333;
		/* 深灰色字体 */
		font-size: 30rpx;
		/* 字体大小，比时间稍大 */
		line-height: 1.6;
		/* 行高，使文本更易读 */
		margin-top: 20rpx;
		/* 上边距，与内容保持一定距离 */
		padding: 0 10rpx;
		/* 内边距，使文本不紧贴边界 */
		word-wrap: break-word;
		/* 自动换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 文本溢出时显示省略号 */
		display: -webkit-box;
		/* 使用Webkit的盒子模型 */
		-webkit-line-clamp: 5;
		/* 限制显示的行数 */
		-webkit-box-orient: vertical;
		/* 设置盒子方向为垂直 */
	}
</style>